import React, { useState } from 'react';
import { Button, Space, Table, Tag, Modal, Input, Select, DatePicker, Popconfirm, Pagination } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import dayjs from 'dayjs';
import Myfrom from '../../components/Myfrom';
import * as asyncfn from '../../store/ctmSlice'
import { removeEmpty } from '@osir/tools'
const Cardword = () => {
    let obj = useSelector(state => state.todos)
    console.log(obj)
    let dispatch = useDispatch()
    const [size, setSize] = useState(3)  //条数
    const [current, setCruuent] = useState(1)  //页数
    const { RangePicker } = DatePicker;
    const dateFormat = 'YYYY/MM/DD';
    const [title, setTitle] = useState("新增")
    const [itemobj, setItemobj] = useState({})
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const columns = [
        {
            title: 'Id',
            dataIndex: 'id',
        },
        {
            title: '优惠劵名称',
            dataIndex: 'title',
        },
        {
            title: '领取日期',
            dataIndex: 'time',
            render: (time) => {
                return dayjs(time).format('YYYY MM-DD HH:mm:ss ')
            }
        },
        {
            title: '发布数量',
            dataIndex: 'num',
        },
        {
            title: '状态',

            dataIndex: 'Collect',
            render: (Collect) => {
                return <Tag color={Collect ? "blue" : ""}>{Collect ? "开启" : "关闭"}</Tag>
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button
                        onClick={() => {
                            setTitle("编辑")
                            showModal()
                            setItemobj({ ...record })
                        }}
                    >编辑</Button>
                    <Popconfirm
                        title="提示"
                        description="确定要删除吗?"
                        onConfirm={() => {
                            dispatch(asyncfn.async_getdelshoplist(record.id))
                        }}
                        okText="是"
                        cancelText="否"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    const [tit, setTit] = useState({
        title_like: "",
        Collect: "",
        time_gte:'',
        time_lte:'',
    })
    return <div>
        <div>
            <span>优惠劵名称</span><Input placeholder="请输入名称" style={{ width: "240px" }} onChange={(e) => {
                setTit({ ...tit, title_like: e.target.value })
            }} />
            <span>状态</span> <Select style={{ width: "240px" }} onChange={(ev) => {
                setTit({ ...tit, Collect: ev })
            }}>
                <Select.Option value={true}>开启</Select.Option>
                <Select.Option value={false}>关闭</Select.Option>
            </Select>
            <span>时间</span>  <RangePicker
                 
                format={dateFormat}
            />
            <Button
                onClick={() => {
                    dispatch(asyncfn.async_searchshoplist(removeEmpty(tit)))
                }}
            >搜索</Button>
            <Button
                onClick={() => {
                    dispatch(asyncfn.async_searchshoplist(removeEmpty({})))
                }}
            >重置</Button>
        </div>
        <Button type="primary" onClick={() => {
            setTitle("新增")
            showModal()
            setItemobj({})
        }}>
            新增
        </Button>
        <Modal
            title={title}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            onCancel={handleCancel}
            footer={null}
        >
            <Myfrom
                title={title}
                itemobj={itemobj}
                handleCancel={setIsModalOpen}
                key={new Date().getTime()}
            />
        </Modal>
        <Table columns={columns} dataSource={obj.shoplist} rowKey={'id'} pagination={{
            showSizeChanger: true,
            showTotal: (total) => `Total ${total} items`,
            onChange: (page, size) => {
                setSize(size),
                    setCruuent(page)
            },
            pageSize: size,
            current,
            pageSizeOptions: ['1', '2', '3', '4']
        }
        } />;
    </div>

}
export default Cardword;
